TanStack Router
https://gyazo.com/43fc7160d682d0cb709dd75db336ee2d
型安全なfile-system based routing library
docs
github
RouteOptions
Route Loadingのライフサイクル
TanStack RouterのNavigation
routing定義方法が複数ある
Tanstack Routerでfile-based routing (推奨)
file-system based routingできる
Tanstack Routerでcode-based routing
Tanstack RouterでVirtual File Routes
上記2つのハイブリッド
#wip
https://zenn.dev/aishift/articles/ad1744836509dd
https://github.com/mrsekut/trial_tanstack_router
クソ雑
createRootRouteWithContext: コンテキスト付きルートルートの作成
RouterProvider: ルータープロバイダー
Link: ナビゲーションリンク
Outlet: 子ルートのレンダリング
ナビゲーション関連
useNavigate (tanstack)
プログラムによるナビゲーションを行う関数を返します
useLocation
現在のlocationオブジェクトを返します
useCanGoBack
ブラウザの戻るボタンが利用可能かどうかを返します
ルートマッチング関連
useMatch
現在のルートマッチオブジェクトを返します
useMatches
全てのルートマッチオブジェクトを返します
useParentMatches
親ルートマッチオブジェクトを返します
useChildMatches
子ルートマッチオブジェクトを返します
useMatchRoute
指定されたルートがマッチしているかを判定します
パラメータ・検索関連
useParams
パスパラメータを取得します
useSearch
検索パラメータを取得します
データローディング関連
Route.useLoaderData
useLoaderDeps
ローダーの依存関係を取得します
コンテキスト・状態関連
useRouteContext
ルートコンテキストを取得します
useRouter
ルーターインスタンスを取得します
useRouterState
ルーターの状態を取得します
その他
useBlocker
ナビゲーションをブロックする機能を提供します
@tanstack/react-router-devtools
@tanstack/router-plugin